<template>
  <view class="he-page-content flex" scroll-y>
    <scroll-view
      class="index-scroll"
      :scroll-top="scrollTop"
      scroll-with-animation
      scroll-y
      :data-theme="theme"
    >
      <view
        class="he-item flex align-center"
        @click="setSelect(index)"
        :class="current === index ? 'he-item__1' : ''"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <text class="he-item__text">{{ item.name }}</text>
      </view>
    </scroll-view>
    <view class="flex-sub">
      <view class="index-small-search">
        <view class="he-input flex align-center" @click="navigateTo">
          <text class="iconfont iconsearchbar_search"></text>
          <text class="he-placeholder">输入商品名称搜索</text>
        </view>
      </view>
      <index-a
        :group="item.id"
        :goods-show="item.goods_show"
        v-if="item.type === 1"
        :goods-loading.sync="goodsLoading"
      ></index-a>
      <index-b :list="item.children" v-else-if="item.type === 2"></index-b>
      <index-c :list="item.children" v-else-if="item.type === 3"></index-c>
    </view>
  </view>
</template>
<script>
import indexA from "./component/index-a.vue";
import indexB from "./component/index-b.vue";
import indexC from "./component/index-c.vue";
import { mapActions } from "vuex";

export default {
  name: "index",
  components: {
    indexA,
    indexB,
    indexC,
  },
  data() {
    return {
      list: [],
      current: 0,
      scrollTop: 0,
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      page: {
        current: 1,
        size: 10,
      },
      item: {
        goods_show: null,
      },
      goodsLoading: false,
    };
  },
  methods: {
    ...mapActions({
      setCartNumber: "cart/setCartNumber",
    }),
    async setSelect(index) {
      if (index == this.current || this.goodsLoading) return;
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect("index-scroll", "menuHeight");
        await this.getElRect("he-item", "menuItemHeight");
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop =
        index * this.menuItemHeight +
        this.menuItemHeight / 2 -
        this.menuHeight / 2;
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("." + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass);
              }, 10);
              return;
            }
            this[dataVal] = res.height;
          })
          .exec();
      });
    },
    getCatList: function () {
      let _this = this;
      this.$heshop
        .group("get", {
          merchant_id: 1,
          include: "goods",
          type: "all",
        })
        .then(function (res) {
          _this.list = _this.$heshop
            .toTree({
              parentKey: "parent_id",
              idKey: "id",
              parentId: 0,
              childrenKey: "children",
            })
            .on(res)
            .get();
          _this.item = _this.list[_this.current];
        })
        .catch(function (err) {
          _this.$toError(err);
        });
    },
    navigateTo: function () {
      uni.navigateTo({ url: "/pages/goods/search" });
    },
  },
  onLoad() {
    this.getCatList();
  },
  watch: {
    current: {
      handler(newVal) {
        this.item = this.list[newVal];
      },
    },
  },
  onShow() {
    if (this.isLogin) {
      this.setCartNumber();
    }
  },
};
</script>
<style scoped lang="scss">
.he-page-content {
  background: #ffffff;
  height: 100vh;
}

.index-scroll {
  width: 180px;
  height: 100vh;
  background: #f5f5f5;
}

.he-item {
  width: 180px;
  height: 88px;
}

.he-item__1 {
  background: #ffffff;
}

.he-item__1 .he-item__text {
  @include font_color("font_color");
  @include border_color("border_color");
  border-left-style: solid;
  border-left-width: 4px;
}

.he-item__text {
  display: inline-block;
  width: 100%;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: #666666;
  border-left: 4px solid transparent;
}

.index-small-search {
  width: 570px;
  height: 104px;
  background: #ffffff;
  overflow: hidden;
}

.he-input {
  width: 529px;
  height: 64px;
  background: #f7f7f7;
  border-radius: 32px;
  margin: 20px;
}

.iconsearchbar_search {
  font-size: 28px;
  color: #999999;
  margin-right: 16px;
  margin-left: 32px;
}

.he-placeholder {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>